'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  PanResponder,
  Animated,
  TouchableOpacity,
  Text,
  TextInput
} from 'react-native';

import Constants from '../../common/Constants'
import SizeUtils from '../../common/SizeUtils'
import TImage from '../../components/TImage'
import Config from '../../config'
import ToastUtils from '../../common/ToastUtils'
import QZ_ApplyAction from '../../actions/quanzi/QZ_ApplyAction'

class QZ_ApplyView extends Component {
	constructor(props) {
    	super(props);
    	this.state={
    	  isshow:false,
        board_id:'' 
    	}
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (event, gestureState) => {
        this.close();
        return false;
      },
    });
  }
  componentWillUpdate(nextProps, nextState) {
    if (nextState.isResponeUpdate == true) {
      nextState.isResponeUpdate = false
      ToastUtils.show(nextState.viewStatus===3 ? '提交成功，请等待审核' : '提交失败')
      if (nextState.viewStatus===3) {
        nextState.text='';
        this.close();
      }
    }
  }
	open(board_id){
	  this.setState({
		isshow:true,
    board_id:board_id, 
	  });
	}
	close(){
	  this.setState({
		isshow:false 
	  });
	}
  postAction(){
    if (this.state.text.length<1) {
      ToastUtils.show('申请原因不能为空');
      return
    }
    new QZ_ApplyAction().call(this, {board_id:this.state.board_id,reason:this.state.text})
  }
	render() {
		if (!this.state.isshow) {return (<View/>)}
    	return (
      		<View style={{position:'absolute',top:0,left:0,bottom:0,right:0,alignItems: 'center',}}>
      			<View style={[styles.background,]} {...this._panResponder.panHandlers}/>
            <View style={{marginTop:90,width:SizeUtils.getWindowSize().width*0.88,
              borderRadius: 5,
              overflow: 'hidden',
              alignItems: 'center',
              backgroundColor:'#fff'}}>
                <Text style={{marginTop:15,fontSize: SizeUtils.translateFontSizeToCode(34), color: '#000' }}>{'请输入解散圈子的原因'}</Text>
                <View style={styles.conent}>
                  <TextInput
                    maxLength={200}
                    multiline={true}
                    style={{padding:5,
                    flex:1,
                    fontSize:SizeUtils.translateFontSizeToCode(28)}}
                    onChangeText = {
                      (value) => {
                        this.setState({text:value});
                      }
                    }
                    placeholder = {'请填写(200字内)'}
                    underlineColorAndroid="transparent"
                    value = {this.state.text}
                  />
                </View>
                <View style={styles.bottom}>
                    <TouchableOpacity style={{alignItems: 'center',justifyContent: 'center',
                      borderWidth: SizeUtils.translateDesignNumToCode(3),
                      width:80,
                      height:40,
                      marginRight:40,
                      borderRadius:4,
                      borderColor: '#eeeeee',}} onPress={() => {this.close()}}>
                        <Text style={{color:'#000'}}>取消</Text>
                    </TouchableOpacity >
                    <TouchableOpacity style={{alignItems: 'center',justifyContent: 'center',
                      width:80,
                      borderRadius:4,
                      height:40,
                      backgroundColor:'#6699CC',
                      }} onPress={() => {this.postAction()}}>
                        <Text style={{color:'#fff'}}>提交申请</Text>
                    </TouchableOpacity >
                </View>
              <TouchableOpacity style={styles.close} onPress={() => {this.close()}}>
                <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(28), color: '#6699CC' }}>{'关闭'}</Text>
              </TouchableOpacity>
            </View>
      		</View>
    	);
  	}
}

const styles = StyleSheet.create({
	background: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  conent:{
    marginTop:18,
    height:120,
    width:'92%',
    borderWidth: SizeUtils.translateDesignNumToCode(3),
    borderColor: '#999',
  },
  bottom:{
    flexDirection: 'row',
    height:60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  close:{
    top: 2,
    right: 8,
    position: 'absolute',
    width:40,
    height:40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


export default QZ_ApplyView;